<template>
    <div>
        <el-form style="margin: 10px 0" :model="queryForm" inline>
            <el-form-item label="发起者名称">
                <el-input suffix-icon="el-icon-position" style="width: 200px" v-model="queryForm.userName"
                    placeholder="请输入发起者名称"></el-input>
            </el-form-item>
            <el-form-item label="接收者名称">
                <el-input suffix-icon="el-icon-position" style="width: 200px" v-model="queryForm.targetName"
                    placeholder="请输入接收者名称"></el-input>
            </el-form-item>
            <el-form-item label="聊天内容">
                <el-input suffix-icon="el-icon-position" style="width: 200px" v-model="queryForm.content"
                    placeholder="请输入聊天内容"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button class="mll-5" type="primary" @click="fetchChat">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button class="mll-5" type="warning" @click="reset">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button class="mll-5" type="danger" @click="deleteSelected"
                    :disabled="!this.selectedIds.length">批量删除</el-button>
            </el-form-item>
        </el-form>

        <el-card class="box-card">
            <el-table :data="chatList" script style="width:100%" @selection-change="handelSelectionChange"
                :row-key="row => row.id">
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column prop="id" label="消息id" align="center" />
                <el-table-column prop="userName" label="发起者名称" align="center" />
                <el-table-column prop="targetName" label="接收者名称" align="center" />
                <el-table-column prop="content" label="聊天内容" align="center" />
                <el-table-column prop="createTime" label="消息时间" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.createTime | formatDate }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" @click="deleteChat([scope.row.id])">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <span class="demonstration" />
                <div style="padding: 10px 0; text-align: center">
                    <el-pagination @current-change="handelPageChange" :current-page="queryForm.pageNo"
                        :page-size="queryForm.pageSize" :total="total" :page-count="pages"
                        layout="total,prev,pager,next,jumper">
                    </el-pagination>
                </div>
            </div>

        </el-card>
    </div>
</template>
  
<script>
import { getChatPage, deleteChatByIds } from '@/api/chat';
import dayjs from 'dayjs';
export default {
    data() {
        return {
            queryForm: {
                pageNo: 1,
                pageSize: 5,
                userName: '',
                targetName: '',
                content: '',
            },
            chatList: [],
            total: 0,
            pages: 0,
            selectedIds: [],

        };
    },
    methods: {
        async fetchChat() {
            try {
                const response = await getChatPage(this.queryForm);
                this.chatList = response.data.list;
                this.total = Number(response.data.total);
                this.pages = Number(response.data.pages)
                console.info("list:", this.chatList)
                console.info("total:", this.total)
                console.info("pages:", this.pages)
            } catch (error) {
                console.error("查询失败", error);
            }
        },
        handelPageChange(page) {
            this.queryForm.pageNo = page;
            this.fetchChat();
        },
        reset() {
            this.queryForm.userName = '';
            this.queryForm.targetName = '';
            this.queryForm.content='';
            this.fetchChat();
        },
        async deleteChat(ids) {
            try {
                await deleteChatByIds(ids);
                this.$message.success("删除成功");
                if (this.chatList.length <= ids.length && this.queryForm.pageNo > 1) {
                    this.queryForm.pageNo -= 1;
                }
                this.fetchChat();
            } catch (error) {
                this.$message.error("删除失败" + (error.message || "未知错误"))
            }
        },
        async deleteSelected() {
            if (this.selectedIds.length === 0) {
                this.$message.warning("请至少选择一条记录");
                return;
            }
            this.deleteChat(this.selectedIds);
        },
        handelSelectionChange(selected) {
            this.selectedIds = selected.map(item => item.id);
        },
    },
    mounted() {
        this.fetchChat();
    },
    filters: {
        formatDate(value) {
            return value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '';
        }
    }
}

</script>
  
<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.mll-5 {
    margin-left: 10px;
}</style>